<template>
  <div class="publicBox" id="userListSeeCss">

<el-form ref="form" :model="ruleForm" class="demo-form-inline publicEditFrom" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
       <p>用户列表/查看详情</p>               
     </div>
</el-row>

<div>
    <el-row>
        <div class="pubPage">
        <p>基本信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>用户ID：{{ruleForm.id}}</p>
            <p>姓名：{{ruleForm.name}}</p>
            <p>用户类型：{{ruleForm.usertypename}}</p>
        </div>
            <div class="box">
            <p>昵称：{{ruleForm.nickname}}</p>
            <p>性别：{{ruleForm.gendername}}</p>
            <p>状态：{{ruleForm.statusname}}</p>
        </div>
            <div class="box">
            <p>头像：</p>
            <p v-if="flag">手机号码：{{ruleForm.mphone}}</p>
            <el-form-item label="手机号码:" prop="mphone" v-else label-width ="72px">
                <el-input class="pubIptS" v-model="ruleForm.mphone"  placeholder="请输入手机号码"></el-input>
            </el-form-item>
        </div>
            <div class="box">
            <p v-if="flag">地区：{{ruleForm.regionname}}</p>
            <el-form-item label="地区" class="comCity" v-else  label-width ="40px">
                <publicCity ref="publicCity"  :cityCodeDefault="cityCodeDefault"></publicCity>
            </el-form-item>

            <!-- <publicCty v-else class="comCity" ref="publicCity"></publicCty> -->
            <p v-if="flag">身份证号：{{ruleForm.idcard}}</p>
            <el-form-item label="身份证号:" prop="idcard" v-else label-width ="72px">
                <el-input class="pubIptL" v-model="ruleForm.idcard"  placeholder="请输入身份证号"></el-input>
            </el-form-item>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>财务信息</p>               
        </div>
    </el-row>
    <div class="inform">
        <p v-if="flag" class="money">钱包余额：{{ruleForm.balance}}元</p>
        <el-form-item class="input_right" label="钱包余额:" prop="balance" v-else label-width ="72px">
            <el-input class="pubIptS" v-model.number="ruleForm.balance"  placeholder="请输入钱包余额"></el-input><span>元</span>
        </el-form-item>
        <p v-if="flag">奖励金余额：{{ruleForm.bounty}}元</p>
        <el-form-item label="奖励金余额" prop="bounty" v-else label-width ="86px">
            <el-input class="pubIptS" v-model.number="ruleForm.bounty"  placeholder="请输入奖励金余额"></el-input><span>元</span>
        </el-form-item>
    </div>

    <div class="list_box">
        <p>持有优惠卷：</p>
        <public-table
        class="listArr" 
         :columnDefs="columnDefs" 
         :tableData="tableData" 
         :order=true
         width=652
         :btn=[]></public-table>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>绑定第三方账号</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>富宝袋ID：1232495988731</p>
        </div>
            <div class="box">
            <p>微信ID：48523f9342jfs032i2i02</p>
        </div>
        <div class="box">
            <p>QQID:43273fh293885</p>
        </div>
    </div>
</div>


<div>
    <el-row>
        <div class="pubPage">
        <p>属性标签</p>               
        </div>
    </el-row>

    <el-tag>游戏</el-tag>
    <el-tag>数码</el-tag>
    <el-tag>中等收入</el-tag>
</div>

   <el-row>
        <div class="pubPage">
        <p>操作</p>               
        </div>
    </el-row>

<el-row class="pubSubmitBtn-row" v-if="flag">
            <el-button class="pubBtnBlue105" type="primary" @click="retrunPass">密码重置</el-button>
            <el-button class="pubBtnBlue105" type="primary" v-if="seclv = -2" @click="informationEdit">信息编辑</el-button>
</el-row>
<el-row class="pubSubmitBtn-row" v-else>
            <el-button class="pubBtnBlue105" type="primary" @click="submitForm">保存</el-button>
            <el-button class="pubBtnBlue105" type="primary" @click="canCleFn">返回</el-button>
</el-row>
</el-form>
  </div>
</template>

<script>
import loginVue from "../login.vue";
import * as Api from '@api/system.js'
import * as API from '@api/userControl.js'
import publicTable from "@/components/public/publicTable.vue"
import publicCity from "@/components/public/publicCity.vue"
export default {
  components: {
    publicTable,
    publicCity
  },
  data() {
    return {
    cityCodeDefault:"442000",
    ruleForm:{},
    seclv:'',
    columnDefs :[
            {headerName: '优惠券ID', field: 'id',width:300},
            {headerName: '优惠券名称', field: 'name',width:300}
        ],
        tableData: [],
        flag:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
           submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.edittestuserApi()
            } else {
              console.log('error submit!!');
              return false;
            }
        });
       },
       async edittestuserApi(){
          let data= this.$refs.publicCity.getCityFn()
          this.ruleForm.regionName = data.province + data.city +data.county
          this.ruleForm.regionCode = data.code
          let res = await API.edittestuserApi(this.ruleForm) 
          if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:'/platform/userControl/userList'})
            }else{
              this.$message.error({message:res.ErrorCode})
            }
      },
      resetPassword(){    //重置密码api请求
           let params={id:this.$route.query.data.id}
           Api.resetPassword(params).then(res=>{
             if(res.IsPositive){
                   this.resetTip()
             }else this.$message.error({message:res.ErrorCode})
           })
      },
      retrunPass(){   //重置密码
           this.$confirm('确定重置密码吗', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'info '
           }).then(() => {
               this.resetPassword()
           }).catch(() => {});
      },
      resetTip(){  //提示重置密码成功信息
        this.$alert("重置后的密码为123456,请提醒账号使用人及时修改密码","重置成功", {
          confirmButtonText: '确定',
          callback: action => {
             this.$router.go(-1)
          }
        });
      },
      informationEdit(){
          this.flag = false
      },
       canCleFn(){
           this.$router.go(-1)
       },


  },
   created() {
    if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
                  this.rowData=this.$route.query.data
                  this.ruleForm={
                           id:this.rowData.id, 
                           name:this.rowData.name, 
                           usertypename:this.rowData.usertypename, 
                           nickname:this.rowData.nickname,
                           gendername:this.rowData.gendername, 
                           statusname:this.rowData.statusname,
                           mphone:this.rowData.mphone,
                           date:this.rowData.date, 
                           idcard:this.rowData.idcard,
                           bounty:this.rowData.bounty,
                           balance:this.rowData.balance,
                           regionname:this.rowData.regionname
                  }
                  this.seclv = this.rowData.seclv
                  console.log(this.seclv)
        }

  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less" scoped>
 #userListSeeCss{
     display: flex;
     flex-direction: column;
    //  span{
    //      font-size: 16px;
    //      margin-right: 140px;

    //     }
        .pubPage{ 
            padding:0 0 10px 0;
            color: #a7a7a7;
            border-bottom: 1px dashed #000000;
        }
        .warp{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            width: 1280px;
            // height: 100px;
            margin: 15px 0;
            .box{
                width: 260px;
                p{
                    margin-bottom: 5px;
                    font-size: 16px;
                }
                
            }
            .box_p{
                    margin-top: 28px;
                }
        }
        .el-tag{
            background-color: #EEEEEE;
            border-radius: 0px;
            margin: 10px 0;
            color: #000000;
            width: 80px;
            text-align: center;
        }
        .list_box{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin: 10px 0;
        }
        .listArr{
            margin: 0;
            margin-left: 88px;
        }
        .inform{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin: 15px 0;
        }
        .money{
            margin-right: 156px;
        }
        .input_right{
            margin-right: 45px;
        }
        .comCity{
            margin: -10px 0 5px 0;
        }
    }
</style>